<template>
	<!--指派-通讯录-人员列表-->
	<view class="com-box" @click="tochecked(obj.id,obj.checked)">
		<image class="com-box-img" :src="obj.img || $mAssetsPath.icon_mrtx"></image>
		<view class="com-box-r">
			<view class="com-box-r-l">
				<view class="com-box-r-name">{{obj.nickname}}</view>
				<view v-if="obj.type == 1" class="com-box-r-txt">{{obj.role_name}}</view>
				<view v-else class="com-box-r-txt">{{obj.is_admin == 0 ? '成员' : '主管'}}</view>
			</view>
			<image v-if="is_check" class="com-box-r-r" :src="obj.checked?$mAssetsPath.icon_check_on:$mAssetsPath.icon_check"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name: "com-top",
		components: {},
		props: {
			obj: {
				type: Object,
				default () {
					return {
						id:1,
						head_img: '/static/data-img/img.jpg',
						name: '张三',
						tag: '经理',
					}
				}
			},
			is_check:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
			}
		},
		methods:{
			tochecked(id,checked){
				this.$emit('tochecked',id,checked)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.com-box {
		display: flex;
		align-items: center;
		height: 120rpx;
		border-bottom: 1rpx solid #f5f5f5;
		.com-box-img{
			width: 80rpx;
			height: 80rpx;
			margin-right: 30rpx;
			border-radius: 40rpx;
		}
		.com-box-r{
			width: calc(100% - 110rpx);
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.com-box-r-l{
				display: flex;
				align-items: center;
				.com-box-r-name{
					font-size: 32rpx;
					font-weight: 400;
					color: $font-color-3;
					margin-right: 20rpx;
				}
				.com-box-r-txt{
					font-size: 20rpx;
					font-weight: 400;
					color: $font-color-b3;
					border: 1rpx solid $font-color-b3;
					padding: 0 10rpx;
					border-radius: 4rpx;
				}
			}
			.com-box-r-r{
				width: 30rpx;
				height: 30rpx;
			}
			
		}
 	}
</style>
